<%--
  Created by IntelliJ IDEA.
  User: houxianghua
  Date: 2015/11/3
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
  <title>用药指导</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="${assets}/jsp/healthEducation/medicationGuid/css/healthEdu.css" type="text/css"/>
  <script type="text/javascript" src="${js}/jquery-1.9.1.min.js"></script>
  <%--<script type="text/javascript" src="${assets}/jsp/healthEducation/medicationGuid/js/healthEdu.js"></script>--%>
</head>
<body>
<div class="wrap">
  <div class="search">
    <input id="medicationName" type="text" class="txt"/>
    <input type="button" id="queryMedicationGuid" value="查询" class="query"/>
    <ul id="medicationNameList" class="list"></ul>
    <span class="none">您输入的药品未找到，请重新输入</span>
  </div>
  <ul class="methodTab">
    <li class="tab-active">适应症</li>
    <li>禁忌症</li>
    <li>用法和用量</li>
    <li>不良反应</li>
    <li>药理学</li>
    <li>药物相互作用</li>
    <li>制剂与规格</li>
    <li>注意事项</li>
  </ul>
  <div class="content">
    <div class="header"></div>
    <div class="inner act">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
    <div class="inner">
    </div>
  </div>
</div>
<script type="text/javascript">
  $(function(){

    var lists = $('.methodTab li');
    var contents = $('.content .inner');

    lists.each(function(index_li, li){
      $(this).on('click', function(event){
        lists.removeClass('tab-active');
        $(this).addClass('tab-active');
        contents.each(function(index_content, content){
          if(index_li === index_content){
            $(this).show();
          }else{
            $(this).hide();
          }
        });
      });
    });

    var lastTime;
    var bind_name = 'input';

    if (navigator.userAgent.indexOf("MSIE") != -1){//判断是否是ie浏览器
      bind_name = 'propertychange';
    }

    $('#medicationName').bind(bind_name, function () {
      $('.search .none').css('display', 'none');
      lastTime = Math.round(new Date().getTime()/1000);//最后触发事件的时间，这样每次触发事件都会修改last的值，注意last必需为全局变量
      var tempTime = lastTime;//点击时的时间
      setTimeout(function () {    //设时延迟0.5s执行
        if (lastTime - tempTime == 0)//如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
        {
          if($('#medicationName').val().replace(/(^\s*)|(\s*$)/g,'') == ""){
            $('.search ul').css('display', 'none');
            return;
          }
          //置空药品名称下拉列表
          $("ul.list").html("");
          //设置药品名称下拉列表
          $.ajax({
            url: '${URL_ADM_MEDICATION_GUID_SEARCH_NAME}',
            type: 'post',
            data: {medicationName: $("#medicationName").val()},
            async: false, //默认为true 异步
            error: function () {
              alert('error');
            },
            success: function (data) {
              if (data != null && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                  $('<li>' + data[i] + '</li>').appendTo('ul.list')
                }
                $('.search ul.list').css('display', 'block');
                $('.search ul.list').mouseleave(function () {
                  $(this).css('display', 'none');
                });

                $('.search ul.list li').click(function () {
                  $(this).parent('ul').css('display', 'none');
                  var text = $(this).text();
                  $('.txt').val(text);
                  $('.txt').text(text);
//                  queryMedicationGuid();//自动查询
                });
              }else{
                $('.search ul').css('display', 'none');
//                alert();
              }
            }
          });
        }
      }, 500);
    });

    $("#queryMedicationGuid").click(function(){
      queryMedicationGuid();
    });

    function queryMedicationGuid(){
      if($("#medicationName").val().replace(/(^\s*)|(\s*$)/g,'') == ""){
        return;
      }
      $.ajax({
        url:'${URL_ADM_MEDICATION_GUID_SEARCH}',
        type:'post',
        data:{medicationName: $("#medicationName").val()},
        error:function(){
          alert('error');
        },
        success:function(data){
          contents.each(function(index_content, content){
            if(0 === index_content){
              $(this).text(data==""?"":data.indication);      //适应症
            }else if(1 === index_content){
              $(this).text(data==""?"":data.contraindication);//禁忌症
            }else if(2 === index_content){
              $(this).text(data==""?"":data.usageAndDosage);  //用法与用量
            }else if(3 === index_content){
              $(this).text(data==""?"":data.adverseReactions);//不良反应
            }else if(4 === index_content){
              $(this).text(data==""?"":data.pharmacology);    //药理学
            }else if(5 === index_content){
              $(this).text(data==""?"":data.drugInteractions);//药物相互作用
            }else if(6 === index_content){
              $(this).text(data==""?"":data.preparationAndSpecifications);//制剂和规格
            }else if(7 === index_content){
              $(this).text(data==""?"":data.notes);           //注意事项
            }
          });
        }
      });
    }



  });
</script>
</body>
</html>
